<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Spark simple map example</title>
    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://rdf-spark.googlecode.com/svn/trunk/src/jquery.spark.js"></script>
    <link rel="stylesheet" type="text/css" media="screen, projection"
          href="http://liris.cnrs.fr/~pchampin/spark/spark-css/screen.css" >

    <link rel="stylesheet" type="text/css" media="print"
          href="http://liris.cnrs.fr/~pchampin/spark/sparl-css/print.css" >

    <!-- it would be good to make this automatic in spark.gmapv3.js -->
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false" ></script>

    <!-- the following is required by Chrome when running on file: URIs
    <script type="text/javascript"
            src="http://liris.cnrs.fr/~pchampin/spark/spark.gmapv3.js" ></script>-->


  </head>
  <body>

    <div class="container">
      <div class="span-24 last prepend-top">
        <h1>Spark map example</h1>
        <p>
          The following map is a spark showing the result of a
          query. Below is a table containing the same results.

          <div class="spark" id="map_canvas" style="height: 400px"
            data-spark-endpoint="http://10.10.65.138:8081/openrdf-sesame/repositories/SSSC2011"
            data-spark-format="http://liris.cnrs.fr/~pchampin/spark/spark.gmapv3.js"
            data-spark-param-zoom="2"
            data-spark-param-center="Cairo, Egypt"
            data-spark-query="SELECT ?name ?lat ?long WHERE {
            	?p foaf:givenName ?name .
			    ?p geo:lat ?lat .
			    ?p geo:long ?long .
			  }"
            data-spark-param-latitude="lat"
            data-spark-param-longitude="long"
            data-spark-param-label="name"
          >

            <em>loading&hellip;</em>
          </div><br />

          <div class="spark"
            data-spark-rdf="http://dl.dropbox.com/u/3954923/SSSC11Students.rdf.xml"
            data-spark-format="http://km.aifb.kit.edu/sites/spark/src/jquery.spark.simpletable.js"
            data-spark-query="
			  SELECT ?name ?lat ?long WHERE  {
			    ?p foaf:givenName ?name .
			    ?p1 geo:lat ?lat .
			    ?p2 geo:long ?long .
			  }
        "
          >

            <em>loading&hellip;</em>
          </div>
        </p>
        <p>
          <a href="index.html">[back to gallery]</a>
        </p>

      </div>
    </div>

  </body>
</html>
